<template>
    <el-form :model="loginForm" class="login-container">
        <h3>登陆系统</h3>
        <el-form-item>
            <el-input type="input" placeholder="请输入账号" v-model="loginForm.username">
            </el-input>
        </el-form-item>
        <el-form-item>
            <el-input type="input" placeholder="请输密码" v-model="loginForm.password">
            </el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="login">登陆
            </el-button>
        </el-form-item>
    </el-form>
</template>

<script setup>
import {getCurrentInstance,reactive} from 'vue'
import {useStore} from 'vuex'
import { useRouter } from 'vue-router';
const {proxy}=getCurrentInstance();
const store=useStore()
const router=useRouter();
//定义账号密码数据
  const loginForm=reactive({
    username:'admin',
    password:'admin'
  })
  //定义登陆功能
  const login= async()=>{
    //获取数据
    const res=await proxy.$api.getMenu(loginForm)
    console.log(res);
    //调用vuex方法 把数据存入vuex
    store.commit('setMenu',res.menu)
    //存路由过去
    store.commit('getMenu',router)
    //获取token
    store.commit('setToken',res.token)
    //跳转到首页
    router.push({name:'home'})
  }
</script>
<style lang="less" scoped>
 .login-container{

    width: 350px;
    background-color: #fff;
    border: 1px soild #eaeaea;
    border-radius: 15px;
    padding: 35px 35px 15px 35px;
    box-shadow: 0 0 25px #eaeaea;
    margin: 180px auto;
 }
</style>